<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>表单标签</title>
   
    <script src="../js库/mock.js"></script>
    <script src="../js库/vue.js"></script>
  
</head>
<body>
    <div id="root">
            <!-- 
                表单标签  表单域 表单控件(表单元素) 提示信息
              form  action="url地址" method="post"  name="form"
             -->
            <!-- 表单控件(表单元素)
                input  
                    type属性为必填属性   
                                type="submit"和value="上传" 表单提交 type="reset" value="重置"  type="button"和value="普通按钮"   type="file"
                    name属性 表单元素的名字   type="radio"和name="radio"代表一组单选框  type="checkbox"和name="hobby"代表复选框
                    value属性
                    checked属性 主要针对单复选框 
                    maxlength属性 最多字符
                select
                text
             -->
            <!-- <form action="url地址" method="get"  name="form">
             用户名:   <input type="text"  name="username" placeholder="请输入用户名"/></br>
             密码:<input type="password" name="password"/><br> -->
             <!--   单选框必须有相同名字name -->
             <!-- 单选框:男<input type="radio" name="sex" checked value="男"/>女<input type="radio" name="sex" value="女"/><br> -->
             <!-- 不一定要多个选项 一个也行 -->
               <!--   复选框必须有相同名字name -->
             <!-- 复选框:游戏<input type="checkbox" value="game" name="hobby"/>吃饭<input value="rice" checked  type="checkbox" value="rice"  name="hobby"/> 学习<input value="study" type="checkbox" name="hobby"/><br>

              提交: <input type="submit" value="注册"/>  <br>
              重置:<input type="reset" /><br>
              普通按钮: <input type="button" value="普通按钮"/><br>
              文件上传:<input type="file" multiple/><br> -->
            <!-- 点击:    <input type="button" value="提交"/></br> -->
            <!-- </form> -->

            <!-- label标签 为input元素定义标注
                 当鼠标点击label标签的元素时  浏览器会自动把交点转到对应的表单元素上 
                     <label for="username" >用户名</label>
                    <input type="text" name="username" id="username"/>
             -->
            <!-- <form method="get" action="url地址" name="form">
                    <label for="username" >用户名：</label>
                    <input type="text" name="username" id="username"/><br>
                    <label for="man">性别:</label><label for="man">男</label><input type="radio" name="sex" id="man" />
                        <label for="woman">女</label><input type="radio" name="sex" id="woman"/><br>
            </form> -->

            <!-- select下拉列表标签 option至少有一个 selected为默认选中
                 -->
            <form  method="get" action="url">
                所属分类:
                <select>
                    <option   value="10">广东</option>
                    <option selected value="20">北京</option>
                    <option value="30">上海</option>
                </select><br>
                <!-- textarea文本域  多行文本框-->
                介绍:<textarea   placeholder="请简单介绍" cols="5" rows="3"></textarea>
            </form>
    </div>
</body>
<script type="text/javascript">
    // alert(Mock.mock('@word(10)'));
    new Vue({
        el:"#root",
        data: { 
         
                }
    })
</script>
</html>